<template>
    <div>
        <el-button @click="getReq">get请求</el-button>
        <el-button @click="getDelete">delete请求</el-button>
        <el-button @click="getPost">post请求</el-button>
        <el-button @click="getPut">put请求</el-button>
        <el-button @click="getList">数据</el-button>
        <el-button @click="getAdd">增加数据</el-button>

        <el-form :model='formData' label-width='100px' href='form'>
            <el-form-item label='姓名' prop='name'>
                <el-input v-model="formData.name"></el-input>
            </el-form-item>
             <el-form-item label='年龄' prop='age'>
                <el-input v-model="formData.age"></el-input>
            </el-form-item>
             <el-form-item label='电话' prop='phone'>
                <el-input v-model="formData.phone"></el-input>
            </el-form-item>
             <el-form-item label='钱' prop='money'>
                <el-input v-model="formData.money"></el-input>
            </el-form-item>
        </el-form>

        <el-table :data="tableData">

            <el-table-column label='id' prop='id'></el-table-column>
            <el-table-column label='名字' prop='name'></el-table-column>
            <el-table-column label='年龄' prop='age'></el-table-column>
            <el-table-column label='电话' prop='phone'></el-table-column>
            <el-table-column label='钱' prop='money'></el-table-column>

            <el-table-column width='200px' fixed='right' label='操作'>
                <template slot-scope="scope">
                    <el-button type=text @click="getUpdate(scope.row)">更新</el-button>
                    <el-button type='text' @click="btndelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    data(){
        return{
            tableData:[],
            formData:{
                name:'',
                age:'',
                phone:'',
                money:''
            }
        }
    },
    created(){},
    mounted(){
        this.getList()
    },
    methods:{
        getReq(){
            axios.get("http://127.0.0.1:3000/api/test/list/testGet",{
                params:{name:'名称',age:'年龄'}
            }).then(res=>{
                console.log(res)
            })
        },
        getDelete(){
            axios.delete('http://127.0.0.1:3000/api/test/delete/testDelete',{
                params:{id:'id',msg:'msg'}
            }).then(res=>{
                console.log(res)
            })
        },
        getPost(){
            axios.post('http://127.0.0.1:3000/api/test/add/testPost',{
                params:{post1:'1',post2:'2'}
            }).then(res=>{
                console.log(res)
            })
        },
        getPut(){
            axios.put('http://127.0.0.1:3000/api/test/update/testUpdate',{
                params:{put1:'1',put2:'2'}
            }).then(res=>{
                console.log(res)
            })
        },
        getList(){
            axios.get("http://127.0.0.1:3000/api/test/list").then(res=>{
                this.tableData=res.data
                console.log('更新成功')
            })
        },
        btndelete(row){
           this.$confirm('确定删除嘛？').then(()=>{
            axios.delete('http://127.0.0.1:3000/api/test/delete',{
            params:{id:row.id}
           }).then(res=>{
               console.log(res)
               this.getList()
           }) 
           })
        },
        getAdd(){
            axios.post('http://127.0.0.1:3000/api/test/add',{...this.formData}).then(res=>{
                this.getList()
                this.getClen()
            })
        },
        getUpdate(row){
            axios.put('http://127.0.0.1:3000/api/test/update',{id:row.id,...this.formData}).then(res=>{
            this.getList()
            this.getClen()
        })
        },
        getClen(){
             this.$refs.form.resetFields()
        }
    }
    }
</script>